// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'



// 引入css文件
import "./index.css"

//表单处理 form-handler
// 非受控组件
//说明:借助 ref ,使用原生DOM方式来获取表单元素值
//ref的作用: 获取DOM或组件

class MyApp extends React.Component {
    constructor() {
        super()
        //穿件txtRef对象
        this.txtNameRef = React.createRef()
        this.txtContentRef = React.createRef()
        this.state = {
            comments: [
                // { id: 1, name: 'jack', content: '沙发' },
                // { id: 2, name: 'rose', content: '板凳' },
                // { id: 3, name: 'tom', content: '马扎' },
            ],
            userName: '',
            userContent: ''
        }
    }
    //获取文本框的值
    handerForm = (e) => {
        const { name, value } = e.target
        this.setState({
            [name]: value
        })
    }

    //放入评论集合
    handerSend = (e) => {
        const { comments, userName, userContent } = this.state
        //参数校验
        if (userName.trim() === '' || userContent.trim() === '') {
            alert("请输入 评论人 和评论内容")
            return
        }
        const newcomments = [
            {
                id: Math.random() * (1 - 10000) + 10000,
                name: userName,
                content: userContent
            },
            ...comments
        ]
        console.log(newcomments)
        this.setState({
            comments: newcomments,
            userName: '',
            userContent: ''
        })

    }

    //渲染评论数据
    renderList() {
        const { comments } = this.state
        if (comments.length === 0) {
            return (<div>暂无评论, 快去评论吧</div>)
        }
        return (
            <ul>
                {
                    this.state.comments.map(item => (
                        <li key={item.id}>
                            <h3>评论人: {item.name}</h3>
                            <p>评论内容:{item.content}</p>
                        </li>
                    ))
                }
            </ul>
        )
    }


    // renderList() {
    //     return (
    //         this.state.comments.length === 0
    //             ? (<div>暂无评论, 快去评论吧</div>)
    //             : (
    //                 <ul>
    //                     {
    //                         this.state.comments.map(item => (
    //                             <li key={item.id}>
    //                                 <h3>评论人: {item.name}</h3>
    //                                 <p>评论内容:{item.content}</p>
    //                             </li>
    //                         ))
    //                     }
    //                 </ul>
    //             )
    //     )
    // }

    render() {
        const { userName, userContent } = this.state
        return (
            <div className="app">
                <div>
                    {/* 文本框 */}
                    <input onChange={this.handerForm} name='userName' value={userName} placeholder="请输入评论人" type="text" />
                    <br />
                    {/* 富文本框 */}
                    <textarea onChange={this.handerForm} name='userContent' value={userContent} placeholder="请输入评论内容"></textarea>
                    <br />
                    <button onClick={this.handerSend}>发表评论</button>
                </div>
                <br />
                {/* 通过条件渲染决定渲染什么内容 */}
                {/* {
                    this.state.comments.length === 0
                        ? (<div>暂无评论, 快去评论吧</div>)
                        : (
                            <ul>
                                {
                                    this.state.comments.map(item => (
                                        <li key={item.id}>
                                            <h3>评论人: {item.name}</h3>
                                            <p>评论内容:{item.content}</p>
                                        </li>
                                    ))
                                }
                            </ul>
                        )
                } */}
                {this.renderList()}
            </div>
        )
    }

}


// React组件基础
//1 组件的两种创建方式: 函数式组件 类组件
//2 无状态(函数组件)  负责箭头结构展示
//3 有状态(类)组件    负责更新UI 让页面动起来
//4 绑定事件主要this 指向问题
//5 推荐使用受控组件来处理表单
//6 完全利用JS语言的能力创建组件 这就是React的思想

//3 渲染react元素
ReactDOM.render(<MyApp />, document.getElementById('root'))
